<template>
  <div ref="auditBody">
    <el-card v-if="source">
      <div slot="header">
        {{ source.DocTitle }}
        <el-tag
          :style="{
            marginLeft: '10px',
            color: FlowAuditStatus[source.AuditStatus].color,
          }"
          effect="plain"
        >{{ FlowAuditStatus[source.AuditStatus].text }}</el-tag>
      </div>
      <div :style="{ maxHeight: height, overflowY: 'auto' }">
        <auditForm
          ref="flowForm"
          :form-id="formId"
          :link-pk="linkPk"
          :link-type="linkType"
          :page-type="3"
          :readonly="true"
          :is-load="isLoad"
        />
      </div>
    </el-card>
    <el-card v-if="source" class="audit">
      <div slot="header">
        <span class="title">审批意见</span>
        <span class="show">{{ source.NodeName }}节点</span>
      </div>
      <auditLogList :cur-id="itemId" :is-load="source != null" :log-id="logId" />
    </el-card>
  </div>
</template>

<script>
import { GetCopyLog } from '@/flow/api/flowAudit'
import auditForm from '@/customForm/components/auditForm/auditForm.vue'
import { FlowAuditStatus } from '@/flow/config/flowConfig'
import auditLogList from './auditLogList.vue'
export default {
  components: {
    auditForm,
    auditLogList
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      FlowAuditStatus,
      linkPk: null,
      linkType: null,
      formId: null,
      logId: null,
      itemId: null,
      title: null,
      isEnd: false,
      source: null,
      isLoad: false,
      logVisible: false,
      visible: false,
      audit: {
        AuditOpinion: null
      },
      height: 'auto'
    }
  },
  computed: {
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      const res = await GetCopyLog(this.id)
      this.source = res
      this.linkType = res.LinkType
      this.linkPk = res.LinkPk
      this.itemId = res.ItemId
      this.logId = res.LogId
      this.formId = res.FormId
      this.isLoad = true
      this.$nextTick(this.initBody)
      this.audit.AuditOpinion = res.AuditOpinion
    },
    showLog() {
      this.logVisible = true
    },
    initBody() {
      const rect = this.$refs.auditBody.getBoundingClientRect()
      const height = window.innerHeight - rect.top - 340
      this.height = height + 'px'
    }
  }
}
</script>
<style scoped>
.audit {
  margin-top: 10px;
  min-height: 150px;
}
</style>
